<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="状态">
          <el-select
            v-model="filter.enable"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in status" :key="i" :label="data" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属产品">
          <el-select
            v-model="filter.product_id"
            placeholder="请选择产品"
            clearable
          >
            <el-option v-for="(data,i) in products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select
            v-model="filter.project_id"
            placeholder="请选择项目"
            clearable
          >
            <el-option v-for="(data,i) in projects" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目组">
          <el-select
            v-model="filter.cate_id"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in cates" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块名">
          <el-input
            v-model="filter.name"
            placeholder="模块名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input
            v-model="filter.tags"
            placeholder="标签"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input
            v-model="filter.remark"
            placeholder="说明"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            v-model="filter.created_adminer"
            placeholder="创建人"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="更新人">
          <el-input
            v-model="filter.updated_adminer"
            placeholder="更新人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
          <el-button type="primary" icon="el-icon-sugar" plain
                     @click="MakeReprot()"
          >
            创建测试单
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border
                @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
        />
        <el-table-column label="项目/产品" min-width="150">
          <template slot-scope="scope">
            <div class="goto" @click="goProject(scope.row)"><b>项目名称:</b>{{scope.row.project_name}}</div>
            <div class="goto" @click="goProduct(scope.row)" ><b>产品名称:</b>{{scope.row.product_name}}</div>
            <div class="goto" @click="goCate(scope.row)"><b>项目组:</b>{{scope.row.cate_name}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="模块名称"
          align="center"
        />
        <el-table-column label="下属子模块"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goSmodule(scope.row)"><b>子模块：</b>{{scope.row.s_module_sum}}个</div>
            </br>
            <el-button @click="handleAddS(scope.row)">添加子模块</el-button>
          </template>
        </el-table-column>
        <el-table-column label="接口"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goApis(scope.row)"><b>接口：</b>{{scope.row.api_count}}个</div>
            </br>
            <el-button @click="goSmodule(scope.row)">请到子模块添加接口</el-button>
          </template>
        </el-table-column>
        <el-table-column label="测试历史"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goTestModule(scope.row)"><b>测试历史：</b>{{scope.row.test_sum}}条</div>
            </br>
            <el-button @click="goTestModule(scope.row)">查看测试历史</el-button>
          </template>
        </el-table-column>
        <el-table-column label="标签" min-width="200">
          <template slot-scope="scope">
            <el-tag
              style="margin-bottom:5px"
              v-for="item in scope.row.tags"
              :key="item"
              :type="item"
              effect="dark">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="说明"
          align="center"
        />
        <el-table-column
          prop="note"
          label="备注"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
        />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div><el-tag :type="scope.row.enable === 1 ? 'success' : 'info'">{{status[scope.row.enable]}}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="时间/人" min-width="200">
          <template slot-scope="scope">
            <div><b>更新时间:</b>{{scope.row.updated_at}}</div>
            <div><b>更新人:</b>{{scope.row.updated_adminer}}</div>
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.enable == 0"
                icon="el-icon-folder-checked"
                type="warning"
                size="mini"
                @click="setCate(scope.row, 1)"
              >
                开启
              </el-button>
              <el-button
                v-if="scope.row.enable == 1"
                icon="el-icon-folder-delete"
                type="danger"
                size="mini"
                @click="setCate(scope.row, 0)"
              >
                关闭
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>

    <el-dialog title="编辑" :visible.sync="dialogStatus" width="500px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="模块名称" >
          <el-input v-model="formData.name" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="所属产品">
          <el-select
            :disabled="disabledStatus"
            v-model="formData.product_id"
            placeholder="请选择所属产品"
            clearable
          >
            <el-option v-for="(data,i) in products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块说明" >
          <el-input v-model="formData.remark" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="模块备注" >
          <el-input v-model="formData.note" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="标签" >
          <el-tag
            :key="tag"
            v-for="tag in formData.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formData.sort" placeholder="" type="number"  class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="创建测试单" :visible.sync="makeReprotStatus" width="500px">
      <el-form label-width="80px">
        <el-form-item label="测试单说明" >
          <el-input type="textarea" :rows="3" v-model="reprotRemark" placeholder=""  class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="makeReprotStatus = false">取消</el-button>
        <el-button type="primary" @click="handleMakeReprot()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加子模块" :visible.sync="disabledSStatus" width="900px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="所属:">
          <p><b>开发组:</b>《{{formData.cate_name}}》-><b>项目:</b>《{{formData.project_name}}》-><b>产品:</b>《{{formData.product_name}}》</p>
          <p><b>主模块:</b>《{{formData.f_module_name}}》</p>
        </el-form-item>
        <el-form-item label="子模块名称">
          <el-input v-model="formData.name" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="模块说明" >
          <el-input v-model="formData.remark" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="模块备注" >
          <el-input v-model="formData.note" placeholder="" class="filter-item"/>
        </el-form-item>
        <el-form-item label="标签" >
          <el-tag
            :key="tag"
            v-for="tag in formData.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formData.sort" placeholder="" type="number"  class="filter-item"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="disabledSStatus = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api/module/moduleApi' // API接口
import {enableCate} from '@/api/project/product' // API接口
import * as cateApi  from '@/api/project/projectCate' // API接口
import {enableProject}  from '@/api/project/project' // API接口
import {makeReport} from '@/api/runTest/runTestApi' // API接口


export default {
  name: 'moduleFList',
  data() {
    return {
      height:this.$baseTableHeight(1),
      status:{
        null:'全部',
        0:'关闭',
        1:'开启'
      },
      products:{},
      projects:{},
      cates:{},
      filter: {
        id:"",
        created_adminer:"",
        updated_adminer:"",
        product_id:"",
        project_id:"",
        cate_id:"",
        page: 1,
        level:1,
        p_id:0,
        pageSize: 10,
        total: 0,
        tags:"",
        name: '',
        remark:"",
        enable: "null",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      topStatus:0,
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      disabledStatus:false,
      f_module_ids:[],
      makeReprotStatus:false,
      reprotRemark:"",
      disabledSStatus:false,
    }
  },
  created() {
    this.filter.id = this.$route.query.module_id || null
    this.getProduct()
    this.getCate()
    this.getProjects()
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.dataLoading = false
      })
    },
    getCate() {
      cateApi.enableCate(this.filter).then((res) => {
        this.cates = res.data.list
      })
    },
    goApis(data) {
      this.$router.push({path:'/api/apiList',query:{f_module_id:data.id}});
    },
    goSmodule(data) {
      this.$router.push({path:'/module/moduleSList',query:{p_id:data.id}});
    },
    getProjects() {
      enableProject(this.filter).then((res) => {
        this.projects = res.data.list
      })
    },
    getProduct() {
      enableCate(this.filter).then((res) => {
        this.products = res.data.list
      })
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    handleAdd(){
      this.formData = {
        note:"",
        product_id:'',
        enable:1,
        level:1,
        name:'',
        sort:1,
        remark:'',
        tags:[],
        p_id:0,
      },
        this.disabledStatus = false
      this.dialogStatus = true
    },
    handleAddS(data){
      this.formData = {
        f_module_name:data.name,
        cate_name:data.cate_name,
        project_name: data.project_name,
        product_name:data.product_name,
        note:"",
        product_id:data.product_id,
        enable:1,
        level:2,
        name:'',
        sort:1,
        remark:'',
        tags:[],
        p_id:data.id,
      },
        this.disabledStatus = false
      this.disabledSStatus = true
    },
    handleEdit(data){
      this.formData = {
        id:data.id,
        product_id: data.product_id,
        enable: data.enable,
        name: data.name,
        sort: data.sort,
        tags: data.tags,
        remark: data.remark,
        note: data.note,
        p_id:0,
        level:1,
      },
        this.disabledStatus = true
      this.dialogStatus = true
    },
    goProject(data){
      this.$router.push({path:'/project/projectList',query:{project_id:data.project_id}});
    },
    goProduct(data) {
      this.$router.push({path:'/project/productList',query:{product_id:data.product_id}});
    },
    goCate(data) {
      this.$router.push({path:'/project/projectCate',query:{cate_id:data.cate_id}});
    },
    goModuleSList(data) {
      this.$router.push({path:'/module/moduleFList',query:{module_id:data.p_id}});
    },
    saveForm(){
      api.save(this.formData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
        this.disabledSStatus = false
        this.formData = {}
      })
    },
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1);
    },
    setCate(data,enable){
      api.set({id:data.id,enable:enable}).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.formData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleSelectionChange(val) {
      this.f_module_ids = val.map(x => {return x.id})
      //console.log(this.f_module_ids);
    },
    MakeReprot() {
      if(!this.f_module_ids.length) {
        this.$message.error('请选择主模块,才能生成测试单');
        return false
      }
      this.makeReprotStatus = true
    },
    handleMakeReprot() {
      if(!this.f_module_ids.length) {
        this.$message.error('请选择主模块,才能生成测试单');
        return false
      }
      makeReport({f_module_ids:this.f_module_ids, remark:this.reprotRemark}).then((res) => {
        this.getList();
        this.$message.success('创建测试单成功');
        this.reprotRemark = ''
        this.f_module_ids = []
        this.makeReprotStatus = false
      })
    },
    goTestModule(data) {
      this.$router.push({path:'/runTest/testModules',query:{f_module_name:data.name}});
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


